<template>
  <div class="online-experience">
    <component :is="compMap[matchTab]" />
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  import { DetailType } from '../../types'
  import ClothingColorAnalysis from './ClothingColorAnalysis/index.vue'
  import PopulationStatistics from './PopulationStatistics/index.vue'

  export interface Props {
    propValue?: DetailType
  }
  const props = withDefaults(defineProps<Props>(), {})

  const matchTab = ref<string>(props?.propValue?.onlineExperience as string)
  const compMap: { [key in string]: any } = {
    clothingColorAnalysis: ClothingColorAnalysis,
    populationStatistics: PopulationStatistics
  }
</script>
